<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :fullscreen="false"
    :destroyOnClose="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

     <a-steps :current="current">
      <a-step v-for="item in steps" :key="item" :title="item" />
    </a-steps>

    <div class="index-step-container">
      <sc-situation-index-config-form
        ref="realForm"
        @ok="submitCallback"
        :disabled="disableSubmit"
        v-if="current === 0"
      />

      <CreateIndexByDataSource
        ref="createIndexByDataSource"
        v-show="current === 1"
        v-if="indexInfo.configType === '1'"
        @ok="opretaTbaleDone"
      />

      <CreateIndexBySql
        ref="createIndexBySql"
        v-show="current === 1"
        v-if="indexInfo.configType === '2'"
        @ok="checkSQLDone"
      />

      <CreateIndexByIndex
        ref="createIndexByIndex"
        v-show="current === 1"
        v-if="indexInfo.configType === '3'"
        :baseInfo="indexInfo"
        @ok="createIndexByIndexDone"
      />

      <CreateIndexByInterface
        ref="createIndexByInterface"
        v-show="current === 1"
        v-if="indexInfo.configType === '4'"
        @ok="createIndexByInterfaceDone"
      />

      <IndexListStep
        ref="indexListStep"
        v-if="current === 2"
        @ok="indexListDone"
      />

      <CheckSQLDialog ref="checkSQLDialog" v-if="dialogFlag" @cancel="dialogFlag = false" />
    </div>

    <template slot="footer">
      <a-button v-if="current > 0" @click="stepsPrev">上一步</a-button>
      <a-button v-if="current === 0 || current === 1 && indexInfo.configType !== '3'" @click="nextPrev">下一步</a-button>
      <a-button type="primary" v-if="current === 2 && indexInfo.configType === '2'" @click="checkSQL" :loading="loadFlag">测试SQL</a-button>
      <a-button type="primary" v-if="current === 2 || current === 1 && indexInfo.configType === '3'" @click="save" :loading="loadFlag">完成</a-button>
    </template>
  </j-modal>
</template>

<script>
import ScSituationIndexConfigForm from './ScSituationIndexConfigForm'
import CreateIndexByDataSource from '../components/createIndexByDataSource'
import CreateIndexByInterface from '../components/createIndexByInterface'
import CreateIndexBySql from '../components/createIndexBySql'
import CreateIndexByIndex from '../components/createIndexByIndex'
import IndexListStep from '../components/IndexListStep'
import CheckSQLDialog from '../components/CheckSQLDialog'

export default {
  name: 'ScSituationIndexConfigModal',
  components: {
    ScSituationIndexConfigForm,
    CreateIndexByDataSource,
    CreateIndexBySql,
    CreateIndexByIndex,
    IndexListStep,
    CreateIndexByInterface,
    CheckSQLDialog
  },
  data() {
    return {
      // 指标信息
      indexInfo: {
        configName: '',
        configType: '',
        // 默认启用
        status: 1,
        remark: ''
      },
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      current: 0,
      steps: [],
      defaultSteps: ['基本信息', '指标配置', '指标列表'],
      specialSteps: ['基本信息', '指标配置'],
      loadFlag: false,
      dialogFlag: false
    }
  },
  computed: {
    configType() {
      return this.indexInfo.configType
    }
  },
  watch: {
    configType(value) {
      if (value === '3') {
        this.steps = this.specialSteps
      } else {
        this.steps = this.defaultSteps
      }
    }
  },
  created() {
    this.initSteps()
  },
  methods: {
    initSteps() {
      if (this.indexInfo.configType !== '3') {
        this.steps = this.defaultSteps
      } else {
        this.steps = this.specialSteps
      }
    },
    add() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.add()
      })
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.edit(record)
      })
    },
    save() {
      if (this.indexInfo.configType !== '3') {
        this.$refs.indexListStep.checkData()
      } else {
        this.loadFlag = true
        this.$refs.createIndexByIndex.summit()
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$refs.realForm.submitForm()
    },
    submitCallback(data) {
      this.indexInfo = Object.assign(this.indexInfo, data)
      if (!data.flag) {
        delete this.indexInfo.flag
        this.current = 1
      }
    },
    opretaTbaleDone({ indexArr, dataSource, tableDataList }) {
      this.current = 2
      this.indexInfo.dataSource = dataSource
      this.indexInfo.tableDataList = tableDataList
      this.$nextTick(() => {
        this.$refs.indexListStep.setData(indexArr)
      })
    },
    checkSQLDone({ indexArr, dataSource, sqlData }) {
      this.current = 2
      this.indexInfo.dataSource = dataSource
      this.indexInfo.sqlData = sqlData
      this.$nextTick(() => {
        this.$refs.indexListStep.setData(indexArr)
      })
    },
    // optType=2 测试sql语句， optType=1 保存
    indexListDone({ dimensionInfos, indexInfos, optType }) {
      this.indexInfo.dimensionInfos = dimensionInfos
      this.indexInfo.indexInfos = indexInfos

      this.loadFlag = true

      if (optType === 2) {
        this.$post('/index/config/testRunning', this.indexInfo).then(res => {
          if (res.code === 200) {
            this.dialogFlag = true
            this.$nextTick(() => {
              this.$refs.checkSQLDialog.show(res.result)
            })
          } else {
            this.$message.error(res.message)
          }
        }).finally(() => {
          this.loadFlag = false
        })
      } else {
        this.$post('/index/config/saveIndex', this.indexInfo).then(res => {
          if (res.code === 200) {
            this.$message.success('指标增加成功')
            this.$emit('ok')
          } else {
            this.$message.error(res.message)
          }
        }).finally(() => {
          this.loadFlag = false
        })
      }
    },
    createIndexByIndexDone({ complete }) {
      this.loadFlag = false
      if (complete) this.$emit('ok')
    },
    createIndexByInterfaceDone() {},
    handleCancel() {
      this.close()
    },
    stepsPrev() {
      this.current--
      if (this.current === 0) {
        this.$nextTick(() => {
          this.$refs.realForm.edit({
            configName: this.indexInfo.configName,
            configType: this.indexInfo.configType,
            remark: this.indexInfo.remark,
            status: this.indexInfo.status
          })
        })
      }
    },
    checkSQL() {
      if (this.$refs.indexListStep !== undefined) this.$refs.indexListStep.checkData(2)
    },
    nextPrev() {
      if (this.current === 1) {
        if (this.indexInfo.configType === '1') {
          if (this.$refs.createIndexByDataSource !== undefined) this.$refs.createIndexByDataSource.checkOpretaTbale()
        }

        if (this.indexInfo.configType === '2') {
          if (this.$refs.createIndexBySql !== undefined) this.$refs.createIndexBySql.checkSql()
        }
      }

      if (this.current === 0) {
        this.$refs.realForm.submitForm()
      }
      // this.current++
    }
  }
}
</script>
<style lang="less" scoped>
.index-step-container {
  padding-top: 20px;
  height: calc(100% - 40px);
  overflow: auto;
}
</style>
